<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="file" id="imageFile" accept="image/*">
<button onclick="analysis()">解析</button>
<div id="content"></div>

<script th:src="@{/js/exif.js}"></script>
<script>
    function analysis() {
        const imageFileInput = document.getElementById('imageFile');
        const file = imageFileInput.files[0];

        if (!file) {
            alert('请先选择图片！');
            return;
        }
        parseImageMetadata(file)
            .then(data => {
                document.getElementById('content').innerText = data;
            })
            .catch(e => {
                console.log(e)
            })
    }

    function parseImageMetadata(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = (event) => {
                const img = new Image();
                img.onload = () => {
                    // 使用exif-js解析图片的EXIF数据
                    EXIF.getData(img, function () {
                        const allMetaData = EXIF.getAllTags(this);
                        const latitude = EXIF.getTag(this, "GPSLatitude");
                        const longitude = EXIF.getTag(this, "GPSLongitude");
                        const dateTimeOriginal = EXIF.getTag(this, "DateTimeOriginal");

                        // 你可以根据需要提取更多元数据
                        const metadata = {
                            latitude,
                            longitude,
                            dateTimeOriginal,
                        };
                        console.log(metadata)
                        console.log(allMetaData)
                        resolve(metadata);
                    });
                };
                img.onerror = (error) => {
                    reject(error);
                };
                // 读取文件内容作为DataURL
                img.src = event.target.result;
            };
            reader.onerror = (error) => {
                reject(error);
            };
            // 读取图片文件为DataURL
            reader.readAsDataURL(file);
        });
    }
</script>
</body>
</html>